•  
    Tampilkan postingan dengan label Tips Trik. Tampilkan semua postingan
    Tampilkan postingan dengan label Tips Trik. Tampilkan semua postingan

    Februari 13, 2011

    Cara Mudah Menulis Kode Script HTML Untuk Posting Blog

    2 komentar
    Sebenarnya saya udah prnah posting tutorial "Cara Mudah Menulis Kode Script HTML  Untuk Posting Blog" pada bulan september tahun kemarin, tapi karena ada komentar Sobat yg bilang kalo cara tersebut dirasa masih terlalu ribet, jadi saya coba posting ulang, tentunya saya buat lebih sederhana, agar kita yg masih sama" newbie & masih tahap belajar, bisa dengan lebih mudah memahaminya.
     Bagi Sobat blogger yg udah senior, mungkin postingan saya ini udah jadul bangedzz alias ketinggalan jaman, tapi bagi yg masih NEWBIE seperti saya ini, saat pertama kali ingin mencoba belajar membuat posting tentang tutorial Blog.....ternyata pengalaman mengatakan bahwa...saya sangat kebingungan n nggak mudeng blaazz(nggak paham), bagaimana nggak bingung, setiap kode script yg coba saya tulis, begitu saya terbitkan jadinya acak-acakan, nggak seperti yg saya harapkan....
    Tapi saya yakin, pengalaman saya ini juga pernah terjadi pada Sobat....hehehehee......jujur aja yaaaa.. :)
    Akhirnya saya coba puter" n keliling", tanya sama Mbah google, .................wooowww....setelah berjuang tanpa lelah(wkwkwkk....), ternyata ada juga cara yg sangat mudah n nggak serumit yg kita bayangkan(khusus sesama newbie). Yo wis lah, saya nggak mau ber tele-tele....Sobat pasti capek baca nya n ane cape ngetik nya.....  langsung aja ke TKP........>>>

    Sebagai Contoh, misalnya kita akan posting artikel tutorial blog dengan kode script dibawah ini,


    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function(){
    $(".trigger").click(function(){
     $(".panel").toggle("fast");
     $(this).toggleClass("active");
     return false;
    });
    });
    </script>



    agar code script diatas bisa kita posting sesuai dengan yang kita harapkan,/ alias tidak rusak, maka langkah-langkah yang harus dilakukan adalah sebagai berikut,


    Langkah .1

    Silahkan Sobat buka link ini: centricle.com
    Disini(gambar), sebagai contoh, saya mencoba menggunakan kode script di atas, dimana hasilnya Sobat bisa melihat, yaitu pada gambar.2(script asli), dan gambar.3(hasilnya setelah di encode).




    gambar .1



    Langkah .2 

    Copy code script yang akan Sobat tampilkan ke dalam postingan (untuk percobaan, silahkan copy kode script diatas), dan paste kan kedalam kolom yg tersedia, yg masih tampak kosong tersebut (gambar.1).
    Maka selanjutnya akan terlihat seperti gambar dibawah ini (gambar.2)


    Gambar .2

    Langkah .3

    Klik tombol encode, dan hasilnya akan terlihat seperti gambar dibawah ini (Gambar.3)

    Gambar .3

    Langkah .4

    Sobat hanya tinggal meng copy hasilnya, dan selanjutnya paste kan pada postingan.

    Kira-kira gitu aja sih, kali aja di antara Sobat semua ada yg mau menambahkan, atau ada cara yg lebih mudah, mohon bersedia tuk berbagi ilmunya.  :)





    Februari 12, 2011

    Membuat Vertical Sliding Info Panel With JQuery

    0 komentar

    Hai Sobat, lama rasanya udah ga bikin postingan, terkadang begitulah, hobbi males kalo kambuh begitu sudah...hehehee.
    Oyawww, berhubung kemarin ada temen chat di FB nanyain, gimana cara bikin gambar(blog) yg di sudut kiri atas itu mas(maksudnya vertical sliding info panel gitu lhooohhh), yo wis lah, saya coba bikin postingannya aja. Profil slide panel sebelah kiri atas, contoh bisa dilihat pada blog Gubug Rantau, artikel saya ini diadaptasi dari spyrestudios.com dengan judul asli "Vertical Sliding Info Panel With jQuery dan juga dari berbagai sumber, terutama dari blog" Sobat yg udah pada senior,dan kemudian saya kasih sedikit sentuhan iseng" an coba",sehingga menjadi seperti yang sekarang ada pada blog saya. saya mencoba membuat artikel ini sesederhana mungkin, hal ini agar mudah dipahami bagaimana cara kerja dari sliding panel, sehingga secara perlahan kita bisa sambil belajar melakukan modifikasi pada bagian isi dari sliding panel tersebut.
    Yo wis lah Sob, kelamaan dongengnya, langsung ke TKP aja yuuuukkk....>>>


    Langkah Pertama
    Login ke Blogger
    Langkah Kedua
    Masuk ke "Tata Letak - Edit HTML"
    Langkah Ketiga
    Klik "Expand Template Widget"
    Langkah Empat
    Cari kode di bawah ini:
    ]]></skin>
    Langkah Kelima
    Masukan (copy paste) kode dibawah ini diatas kode pada langkah ke empat:



      .panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
        .panel p{color:#ccc;margin:0 0 15px;padding:0}
        .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
        .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
        a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
        a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
        a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
        .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
        .colleft{float:left;width:130px;line-height:22px}
        .colright{float:right;width:130px;line-height:22px}
        a:focus{outline:none}
        .panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
        .panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
        .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}


    Langkah 6

    Cari kode dibawah ini:

    </head>


    Langkah 7
    Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:


     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".trigger").click(function(){
     $(".panel").toggle("fast");
     $(this).toggleClass("active");
     return false;
    });
    });
    </script>





    Langkah 8
    Cari kode dibawah ini:

     </body>


    Langkah 9
    Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:


        <div class='panel'>
    <h3>WELLCOME</h3>


    <p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
    </p>
    <h3>A Little Something About Me</h3>
    <img height='73px' src='http://i1209.photobucket.com/albums/cc398/johantkurniawan/My%20Village/Rantau.jpg' width='73px'/>
    <p>Nama saya Johant,saya hanya manusia biasa, mungkin sama sperti Anda, sekarang sayapun masih menjalani proses kehidupan, dan takdir sekarang membawa saya ke Papua, alias MERANTAU, BERDOA dan Berharap semoga bisa menjadi manusia yang lebih baik lagi, sesuai dengan Kehendak NYA.</p>
    <div style='clear:both;'/>
    <div class='columns'>
    <div class='colleft'>
    <h3>Navigasi</h3>
    <ul>
    <li><a href='http://johantkelana.blogspot.com/' title='home'>Home</a></li>
    <li><a href='#' title='about'>About</a></li>


    <li><a href='#' title='portfolio'>Portfolio</a></li>
    <li><a href='#' title='contact'>Contact</a></li>
    <li><a href='#' title='blog'>Blog</a></li>
    </ul>
    </div>
    <div class='colright'>
    <h3>Social Stuff</h3>
    <ul>
    <li><a href='http://twitter.com/johantkelana' title='twitter'>Twitter</a></li>
    <li><a href='http://facebook.com//johant.de.rantau' title='facebook'>Facebook</a></li>
    <li><a href='http://friendster.com/johant' title='friendster'>Friendster</a></li>


    <li><a href='http://johantrantau.blogspot.com/' title='plurk'>Gubuk Rantau
    </a></li>
    <li><a href='http://johantkelana.blogspot.com/' title='plurk'>Jalan Hidup</a></li>
    </ul>
    </div>
    </div>
    <div style='clear:both;'/>
    </div>
    <a class='trigger' href='#'>Me</a>






    Note: script pada langkah 9, baik kode maupun tulisan yang berwarna hijau tinggal diedit & disesuaikan dengan blog Sobat, karena pada dasarnya skript yang sudah ada diatas, masih bisa di modifikasi untuk menghasilkan tampilan yang sesuai dengan selera kita masing". Dan semua tergantung pada ketelitian dan kesabaran Sobat, untuk bisa mendapatkan hasil yang maksimal.

    Langkah 10
    Silahkan mencoba Preview blog terlebih dahulu

    Langkah 11
    Jika hasilnya sudah dirasa cukup, silahkan Sobat klik SIMPAN TEMPLATE.



    Desember 01, 2010

    Membuat Label Cloud Berputar

    2 komentar
    Membuat Label Cloud Berputar



    Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template. Saat ini model atau bentuk label ada 3, label umum atau yang biasa (standard), label cloud, dan label cloud berputar. Yang akan kita bahas sekarang adalah memasang label cloud berputar di blog, seperti yang ada di sidebar blog saya ini.

    Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.
    Untuk mengetahui lebih detail cara membuat Label Cloud Berputar, silahkan Sobat Klik Disini . 

    Terima kasih buat roytanck dan amanda fazani yang telah menyediakan javascript untuk label cloud ini. Jika ada pertanyaan silahkan isi di kolom komentar.

    Terima kasih buat  Tutorial Blogspot yg sudah berbagi ilmu, dan setelah saya mencoba praktek langsung Membuat Label Cloud Berputar, dan ternyata tidak sia- sia alias berhasil, maka saya pun ingin berbagi dengan Sobat semua.

    Jika menurut Sobat artikel ini bermanfaat, silahkan vote ke Lintas Berita agar artikel ini bisa di baca oleh orang lain.

    November 30, 2010

    8 Hal Penting Dalam Mendesain Suatu Blog/Website Yang Baik

    4 komentar
    Apabila ini mengenai website/Blog anda, perlu adanya perhatian penuh untuk setiap detail agar memperoleh hasil yang optimal dan dapat berjalan sesuai dengan yang anda inginkan. Berikut 8 hal yang perlu anda ketahui dalam merancang sebuah website.

    1. Jangan menggunakan Splash Page / Halaman Selamat Datang

    Splash page adalah halaman awal yang ada lihat apabila mengunjungi sebuah website. Umumnya sebuah gambar dengan tulisan "Welcome /Selamat Datang" atau "Click here to enter". Faktanya hal ini tampil begitu-begitu saja tanpa ada kegunaan yang pasti. Jangan biarkan pengunjung anda memiliki alasa untuk menutup website anda / meng-klik tombol "Back". Berikan pengunjung anda isi dari website anda tanpa ada halangan sebuah splash page.

    2. Jangan menggunakan banner iklan berlebihan

    Meskipun rata-rata pengguna internet telah terlatih untuk mengabaikan iklan banner sehingga mereka tidak akan tertarik dengan iklan yang berlebihan. Sebaliknya, sediakan konten iklan yang relevan dengan konten website anda, dan biarkan pengunjung anda yang merasa butuh untuk membeli, bukan dipaksa untuk membeli.

    3. Gunakan navigasi menu yang jelas dan sederhana

    Anda perlu menyediakan navigasi yang sederhana dan navigasi yang langsung ke tujuan, jadi meskipun anak kecilpun akan dapat menggunakannya. Jauhi navigasi berbasis Flash yang rumit atau multi drop-down menu yang rumit. Apabila pengunjung web anda kesulitan menggunakan navigasi web anda, mereka akan meninggalkan website anda.

    4. Miliki indikasi yang jelas dimana user berada

    Saat pengunjung sedang asyik browsing website anda, anda tentu ingin mereka betul-betul mengetahui bagian dari website dimana mereka berada. Dengan itu, mereka akan dapat mengakses informasi yang relevan dan mengakses tiap bagiannya dengan mudah. Jangan buat bingung pengunjung anda saat browse.

    5. Hindari menggunakan suara pada website anda

    Apabila pengunjung ingin tinggal cukup lama di website anda, membaca konten disana, anda tentu ingin pastikan bahwa mereka tidak terganggu dengan suara musik yang berulang-ulang di web anda. Apabila anda tetap memaksakan adanya suara musik, pastikan terdapat kontrol untuk mematikan atau mengurangi volume suara musik.

    6. Hidari banyak menggunakan widget atau fitur flash

    Apabila anda termasuk admin yang hoby menghias blog anda karena ingin berbeda dengan blog atau website lain. atau hanya untuk melengkapi perlengkapan di situs anda STOP! disitu. banyak pengunjung yang kecewa dengan loading situs anda. dan akan meninggalkan situs anda lalu beralih ke blog/website lain. Gunakanlah fitur-fitur sederhana dan jangan terlalu berlebihan untuk menghias blog/website anda

    7. Jangan gunakan widget pelacak IP dsb

    Apakah dengan memasang ini bermanfaat bagi anda? banyak orang yang terjerumus dalam persepsi yang salah dengan memasang widget pembaca atau pelacak IP pengunjung dan 80% dari mereka membuang tempat dengan sia-sia. hentikan sekarang juga! banyak sekali orang di luar sana yang tidak suka gerak-gerik mereka di awasi. memasang widget peacak IP bukan menambah keren blog atau website. tetapi menjadi beban bagi loading. widget semacam ini lebih baik di pakai di website yang menangai client dalam jumlah yang sangat besar.

    8. Gunakan panduan warna yang baik

    Bila anda ingin membuat pengunjung anda nyaman dan datang lagi, berikanlah pelayanan yang baik dengan memberikan penampilan yang baik dan dan tertata rapih. jangan menajadikan website/blog anda mirip seperi kandang ayam yang acak-acakan yang penuh banner/widget yang tertata dengan tidak rapih. gunakanlah tamplate yang biak, dan paduan warna yang baik sehingga tidak membuat mata pengunjung anda pusing.

    Nb: Ini hanyalah sebuah tips, semua pilihan kembali kepada Anda.

    Sumber : http://ayruzallein.blogspot.com